<template>
  {{ mValue }}
  </template>
  <script setup lang="ts">
  import { PropType, computed, onMounted, watch } from 'vue';
  import { MTableColumnType } from '../../Table/types';
  import { requestData } from '../../Form';
  import { useSelectStore } from '/@/store/modules/select';
  import { DefaultOptionType } from 'ant-design-vue/lib/cascader';
  interface MDefaultOptionType extends DefaultOptionType {
    parentId?:string | number | null | undefined;// 父id 
  }
  const selectStore = useSelectStore();
  const props = defineProps({
    data: {
      // 当前行数据
      type: Object
    },
    column: {
      // 列定义数据
      type: Object as PropType<MTableColumnType>
    }
  })
  /**
   * 获取缓存key前辍
   */
  const getCacheKeyPrefix = () =>{
    let cacheKeyPrefix = props.column?.componentProps?.cacheKeyPrefix
    if(!cacheKeyPrefix) {
      // TreeSelect_columnName
      cacheKeyPrefix = props.column?.component + "_" + (props.column?.key || props.column?.dataIndex)
    }
    return cacheKeyPrefix;
  }
  /**
   * 获取节点
   * @param id 节点id,对应value
   * @param treeData 树型数据
   */
  const getNodeData = (id: string | number | null,treeData:Array<MDefaultOptionType> | undefined):MDefaultOptionType | undefined =>{
    let res: MDefaultOptionType | undefined;
    if(treeData) {
      for(var i=0;i<treeData.length;i++) {
        const item = treeData[i]
        if(item.value == id) {
          // 先父子查询
          res = item;
          break
        } else {
          // 再从子中查询
          const childItem = getNodeData(id,item.children)
          if(childItem) {
            res = childItem;
            break;
          }
        }
      }
    }
    return res
  }
  /**
   * 获取所有父级节点（包含自身）
   * @param id 
   * @param treeData 
   */
  const getParentNodes = (id: string | number | null,treeData:Array<MDefaultOptionType> | undefined) =>{
    const res:Array<MDefaultOptionType> = []
    if(!id) return res;
    const nodeData = getNodeData(id,treeData)
    if(nodeData) {
      // 先追加父节点
      res.push(...getParentNodes(nodeData.parentId as any,treeData))
      // 再增加当前节点
      res.push(nodeData)
    }
    return res;
  }
  /**
   * 加工数据
   * @param parentId 
   * @param treeData 
   */
  const handleTreeData = (parentId: string | number | null,treeData: Array<MDefaultOptionType>) =>{
    if(treeData && treeData.length) {
      treeData.forEach((item: MDefaultOptionType) => {
        item.parentId = parentId
        handleTreeData(item.value as any,item.children as Array<MDefaultOptionType>)
      })
    }
  }
  const mValue = computed(()=>{
    let v = props.data?.text
    if(!v) return v;
    const key = getCacheKeyPrefix() + "_" + v;
    const treeData = selectStore.getSelectData(key)
    if(treeData && treeData.length) {
      const first: MDefaultOptionType = treeData[0]
      if(first.parentId === undefined) {
        handleTreeData('0', treeData)
      }
    }
    const nodeDatas = getParentNodes(v,treeData)
    return nodeDatas.map((item: any)=>item.label).join('/')
  })
  // 设置值
  const setValue = () =>{
    const api = props.column?.componentProps?.api
    if(api) {
      const text = props.data?.text
      if(text){
        const key = getCacheKeyPrefix() + "_" + text
        selectStore.requestData(key,api,{
         ...props.column?.componentProps?.params
        },requestData)
      }
    }
  }
  watch(()=>props.data?.text,()=>{
    setValue()
  })
  onMounted(()=>{
    setValue()
  })
  </script>
  <style lang="less" scoped>
  
  </style>